import { useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import { get_xiaoshoue_list } from '../utils/api.tsx';
function Visitnum(props) {
  const chartRef = useRef(null);
  const [listxiaoshoue, setlistxiaoshoue] = useState([]);
  const getlistxiaoshoue = async () => {
    const res = await get_xiaoshoue_list();
    setlistxiaoshoue(res.data.data);
    console.log(listxiaoshoue);
  };
  useEffect(() => {
    getlistxiaoshoue();
    const chartDom = document.getElementById('main');
    const myChart = echarts.init(chartDom);

    const option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          data: [2, 4, 6, 8, 4, 5, 6],
          type: 'line',
          areaStyle: {},
          color: ['#7744FF'],
        },
      ],
    };

    option && myChart.setOption(option);
    //   自适应
    window.onresize = function () {
      myChart.resize();
    };
  }, []);

  return (
    <div style={{ textAlign: 'center', height: '100%', width: '100%' }}>
      <div id="main" style={{ height: '100%', width: '100%' }}></div>
    </div>
  );
}

export default Visitnum;
